<template>
	<view class="app">
		<view class="price-box">
			<text>{{order.subject}}</text>
			<text class="price">{{order.pay_total}}</text>
		</view>
		<view class="pay-type-list">
			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 1" /></label>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="type-item b-b" @click="changePayType(2)">
				<text class="icon yticon icon-alipay"></text>
				<view class="con"><text class="tit">支付宝支付</text></view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 2" /></label>
			</view>
			<!--#endif-->
			<view class="type-item"  v-if=" amount>= order.pay_total" @click="changePayType(3)">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额 ¥{{amount}}</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 3" /></label>
			</view>
			
		</view>

		
		
		<!-- #ifdef APP-PLUS -->
		<text class="mix-btn" @click="confirm">确认支付</text>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<text class="mix-btn" @click="wxh5pay">确认支付</text>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<text class="mix-btn" @click="wxxcxpay">确认支付</text>
		<!-- #endif -->
	</view>
</template>

<script>
import {isEmpty, isEmptyObj,inWechat} from '../../utils';	
import {
	mapState
} from 'vuex';

export default {
	data() {
		return {
			payType: 1,
			order: {
				order_no:'',
				pay_total:0,
				subject:'支付金额'
			},
			loading: false,
			amount:0,
			repay:0,
		
		};
	},
	computed: {
		...mapState('user',['token']),
	},
	onLoad(options) {
		if(!this.token){
			return uni.navigateTo({
				url:'/pages/public/login'
			})
		}
		this.order = JSON.parse(options.data).order;
		
	},
	onShow() {
		//重新拉取余额 因为存在多端
		this.loadAmount();
	},
	methods: {

		loadAmount(){
			var param = {
				token:this.token,
			}
			this.$ajax.get('member/getamount',param).then(data=>{
				if(0==data.error){
					this.amount = data.data;
				}
			})
		},
		//选择支付方式
		changePayType(type) {
			this.payType = type;
		},
		//#ifdef H5 
		wxh5pay(){
			this.$api.msg('demo不提供此功能');
			if(this.payType==3){
				this.payByAccount();
				return ;
			}
			if(0==inWechat()){
				this.$api.msg('不能支付,请用微信打开此网站');
				return false;
			}
			if(isEmptyObj(this.order) || this.order.pay_total<=0){
				this.$api.msg('订单金额错误');
				return false;
			}
			let param={
				token:this.token,
				order_no: this.order.order_no,
				pay_total:this.order.pay_total,
				subject: this.order.subject,
				body:'order'
			}
			let that=this;
			that.$ajax.get('wechat/h5pay',param).then(data=>{
				if(!isEmptyObj(data)){
					const wx = require('jweixin-module');
					wx.config({
						debug: false, 
						appId:data.appId,            //必填，公众号的唯一标识
						timestamp:data.timestamp,   // 必填，生成签名的时间戳
						nonceStr:data.nonceStr,    // 必填，生成签名的随机串
						signature:data.signature,
						jsApiList: ['chooseWXPay'] ,
					}),
					wx.ready(function() {
						wx.chooseWXPay({
							timestamp:data.timestamp, 
							nonceStr:data.nonceStr, 
							package:data.package, 
							signType: data.signType, //md5
							paySign: data.paySign, 
							success(res) {
								uni.navigateTo({
									url: '/pages/money/paySuccess'
								});
							},
							fail(res) {
								that.$api.msg('支付失败,请重新支付');
							}
						});
					});
					wx.error(function(res) {
						console.log('验证失败'+res);
					});
				}
			})
		},
		//#endif
		
		//#ifdef MP-WEIXIN
		wxxcxpay(){
			this.$api.msg('demo不提供此功能');  //已删除服务端的配置,去掉注释也不能支付
			if(this.payType==3){
				this.payByAccount();
				return ;
			}
			if(isEmptyObj(this.order) || this.order.pay_total<=0){
				this.$api.msg('订单金额错误');
				return false;
			}
			let params={
				token:this.token,
				order_no: this.order.order_no,
				pay_total:this.order.pay_total,
				subject: this.order.subject,
				body:'order'
			}
			let that=this;
			uni.login({
				provider: 'weixin',
				success: res => {
					that.$ajax.get('wechat/getxcxopenid',{token:that.token,code:res.code}).then(data=>{
						if(!data){
							return that.$toast('授权错误');
						}
						//发起支付
						params.openId = data;
						that.$ajax.get('wechat/xcxpay',params).then(data=>{
							if('error'!=data){
								uni.requestPayment({
									provider:"wxpay",
									timeStamp: data.timeStamp,
									nonceStr: data.nonceStr,
									package: data.package,
									signType: data.signType,
									paySign: data.paySign,
									success:function(res){
										uni.showToast({
											title:"支付成功",
											icon:"success",
											duration:1000,
										});
										setTimeout(function(){
											uni.navigateTo({
												url: '/pages/money/paySuccess'
											});
										},1000)
									},
									fail:function(res){
										uni.showToast({
											title: '支付失败，请重新支付',
											icon: "none",
											duration: 1000,
										});
									}
								});
							}else{
								return that.$toast('支付错误');
							}
						})
						
					})
				},
			})
		},
		//#endif
		
		//#ifdef APP-PLUS
		confirm() {
			this.$api.msg('demo不提供此功能');
			if(this.payType==3){
				this.payByAccount();
				return ;
			}
			if(isEmptyObj(this.order) || this.order.pay_total<=0){
				this.$api.msg('订单金额错误');
				return false;
			}
			let params={
				token:this.token,
				order_no: this.order.order_no,
				pay_total:this.order.pay_total,
				subject: this.order.subject,
				body:'order'
			}
			this.loading =true;
			if(1==this.payType){ //微信支付
				console.log(params);
				this.$ajax.get('wechat/apppay',params).then(data=>{
					console.log(data);
					if(data){
						uni.requestPayment({
							provider:"wxpay",
							orderInfo:data,
							success:function(res){
								uni.showToast({
									title:"支付成功",
									icon:"success",
									duration:1000,
								});
								setTimeout(function(){
									uni.navigateTo({
										url: '/pages/money/paySuccess'
									});
								},1000)
							},
							fail:function(res){
								uni.showToast({
									title: '支付失败，请到订单中心重新支付',
									icon: "none",
									duration: 1000,
								});
							}
						});
					}
				})
			}
			if(2==this.payType){ //支付宝支付
				//与支付
				this.$ajax.get('ali/pay',params).then(data=>{
					console.log(data);
					if(data){
						uni.requestPayment({
							provider:"alipay",
							orderInfo:data,
							success:function(res){
								uni.showToast({
									title:"支付成功",
									icon:"success",
									duration:1000,
								});
								setTimeout(function(){
									uni.navigateTo({
										url: '/pages/money/paySuccess'
									});
								},1000)
							},
							fail:function(res){
								uni.showToast({
									title: '支付失败，请到订单中心重新支付',
									icon: "none",
									duration: 1000
								});
							}
						});
					}
				})
			}
		},
		//#endif
		//余额支付
		payByAccount(){
			if(isEmptyObj(this.order) || this.order.pay_total<=0){
				this.$api.msg('订单金额错误');
				return false;
			}
			
			if(this.amount<=0 || this.amount<=this.order.pay_total){
				this.$api.msg('余额不足,请换支付方式或先去充值');
				return false;
			}
			let params={
				token:this.token,
				order_no: this.order.order_no,
				pay_total:this.order.pay_total,
				subject: this.order.subject,
				body:'order'
			}
			//支付
			this.$ajax.get('account/pay',params).then(data=>{
				if(0==data.error){ //支付成功
					uni.showToast({
						title:"支付成功",
						icon:"success",
						duration:1000,
					});
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/money/paySuccess'
						});
					},1000)
				}else{
					uni.showToast({
						title: '支付失败，请到订单中心重新支付',
						icon: "none",
						duration: 1000,
					});
				}
			})
		}
	},
};
</script>

<style lang="scss">
.app {
	width: 100%;
}

.price-box {
	background-color: #fff;
	height: 265upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 28upx;
	color: #909399;

	.price {
		font-size: 50upx;
		color: #303133;
		margin-top: 12upx;
		&:before {
			content: '￥';
			font-size: 40upx;
		}
	}
}

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 60upx;

	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}

	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.icon-erjiye-yucunkuan {
		color: #fe8e2e;
	}
	.icon-weixinzhifu {
		color: #36cb59;
	}
	.icon-alipay {
		color: #01aaef;
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.mix-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 630upx;
	height: 80upx;
	margin: 80upx auto 30upx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}


.coupon-item {
	width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
	.coupon-money {
		width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;
		
		.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
		.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		
		.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
		.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
	}
	.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
}
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
</style>
